Skip to content

Conversation

@hanana1253
Copy link
Member

@hanana1253 hanana1253 commented Mar 25, 2022

PR Type

What kind of change does this PR introduce?

  • 버그를 수정했어요.
  • 새로운 기능을 추가했어요.
  • 코드 스타일 업데이트를 했어요(포맷팅, 지역변수)
  • 리팩토링을 했어요 (기능적인 변화 없이, api 변경 없이)
  • 환경설정을 변경했어요.
  • 문서 내용을 변경했어요.
  • 기타 사항을 설명해 주세요.

Related Issues

closed #17
closed #55
solved #25
solved #27
#53
closed #33

What does this PR do?

  • Auth 컴포넌트에 제목을 달고, 서버 인증 에러 메시지 컴포넌트 추가
  • Auth 스타일링 완성
  • Dialog 컴포넌트 스타일링 완성
  • 인증정보 전역상태 rtk 로직 작성
  • 인증정보 관련하여 Header, Menu 컴포넌트에 구독에 따른 상태 변경 및 dispatch 로직 추가
  • Auth 컴포넌트 submit에 dispatch 로직 추가
  • ErrorBoundary 컴포넌트 작성 및 적용
  • Sentry for NextJS 적용

Other information

- 스토리북은 #root 로만 렌더링을 하고 있네요!
- nextJS가 사용하는 루트 요소인 __next 아이디를 갖는 div 요소를 추가했습니다.
브라우저 환경일 때 true를 반환하는 process.browser도 있지만 deprecated 될거라고 한다.
window 전역객체의 유무를 통해 확인한 후 dom 제어 코드를 실행하도록 조건문 처리해주자.
…develop

t # Please enter a commit message to explain why this merge is necessary,
- 서버 인증 실패 시 뜨는 에러메시지 추가, 스타일링 완성
- dialog 컴포넌트의 스타일링을 완성했습니다.
@hanana1253 hanana1253 self-assigned this Mar 26, 2022
@hanana1253 hanana1253 added ✨ style UI를 스타일링 해요! (CSS 작업) 🧪 test 테스트 코드를 만들어 테스트를 진행해요! labels Mar 26, 2022
@hanana1253 hanana1253 added this to the Sprint2 milestone Mar 26, 2022
- window type이 undefined가아닐 때 동작하게 했어야 했는데 반대로 해서 수정
- params 로 전달할 경우 제대로 요청이 가지 않아서 url에 넣는 방식으로 수정
- header와 내용 요소 겹치지 않도록 추가했습니다
- Layout에서 사용하기 위해 headerHeight를 내보냈습니다.
- key prop 추가
- .storybook/preview.js 에서 StoreProvider decorator 추가하면서 각 스토리파일에서는 삭제
- redux store 구독 테스트를 위해 스토리북 환경에 StoreProvider wrapping
- Header 우측 menu 또는 login 버튼에 적용될 store의 auth 상태 적용
- hide를 styled component에 맞게 프롭으로 추가
- 더 명확한 코드를 위해 변수명을 변경하고 타입을 정의했습니다.
@hanana1253 hanana1253 changed the title Auth와 Dialog 컴포넌트 스타일링 및 디버깅 Auth와 Dialog 컴포넌트 스타일링 및 디버깅 + auth 관련하여 header 컴포넌트에 필요한 로직 추가 Mar 26, 2022
@hanana1253 hanana1253 added 🌟 feature 새로운 기능을 만들어요! 🧱 component 컴포넌트 단위 작업을 진행해요! labels Mar 26, 2022
- justify-content 에 제가 자꾸 s를 붙이네요...
- Header 컴포넌트에 hide 여부를 클래스가 아닌 prop으로 전달해서 styled 컴포넌트에 추가
- Auth 컴포넌트에서 타입 이름을 StyleInputProps에서 StyledInputProps로 변경
}).then((res) => res.json());
export async function getServerSideProps({ query }: ContextProp) {
const { keyword } = query;
const { results, totalResults } = await fetch(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getServerSideProps와 같은 next.js의 환경에서 rtk query를 사용할 순 없을까요? 이 부분 알아보겠습니다.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 활용해보려 헀는데 서버사이드라서 RTK query가 제공하는 훅을 사용할 수 없다고만 나왔었어요 알아보고 저도 알려주세요!

Copy link
Contributor

@hhhyyo hhhyyo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다~

transition: top 0.2s ease-in-out;
z-index: 10;
&.hide {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분 지우시면 될 것 같아요

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 지우고 푸시할게요!!

- @sentry/nextjs 설치하고 @sentry/wizard로 configuration 했습니다.
- next.config.js에 Sentry 관련 로직이 추가되었습니다.
- 에러 바운더리 컴포넌트를 적용하고, 에러페이지(_error.tsx)와 에러페이지 (/errorTest) 제작
- 에러바운더리 컴포넌트를 작성했습니다.
- 변경된 yarn.lock 파일입니다.
- 필요없는 코드 삭제했습니다.
- ErrorBoundary component/index에 추가
- _app.tsx에서 절대경로 import 구문으로 수정
- 메뉴에서 signout 후 모달창이 꺼지지 않아서 authcontainer에 onclose 함수를 prop으로 전달해서 signup/signin 하면 showDialog 값을 변경하도록 했습니다.
- RootState와 AuthState로 타입 명시하여 타입에러 해결
- 테스트로 두었던 authUser 기본값을 null로 수정
- react-dom에서 ESLint 문제가 나서 패키지 설치했습니다.
@hanana1253 hanana1253 changed the title Auth와 Dialog 컴포넌트 스타일링 및 디버깅 + auth 관련하여 header 컴포넌트에 필요한 로직 추가 Auth와 Dialog 컴포넌트 + auth 관련하여 RTK 로직 추가, ErrorBoundary 컴포넌트 작성 및 Sentry 연동 Mar 29, 2022
@hanana1253 hanana1253 merged commit 0d085d2 into TeamCooks:develop Mar 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🧱 component 컴포넌트 단위 작업을 진행해요! 🌟 feature 새로운 기능을 만들어요! ✨ style UI를 스타일링 해요! (CSS 작업) 🧪 test 테스트 코드를 만들어 테스트를 진행해요!

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants